<template name='goodsImageList'>
	<view >
		<!-- 图片管理 遮罩层 -->
		<uni-popup ref="goodsImage" type="center" :title="goodsImageList.name" minWidth="auto">
			<view style="height: calc(100% - 70px);display: flex;width: 880px;min-height: 400px;">
				<view class="menu-scroll" style="padding-bottom: 40px;">
					<view v-for="(item,index) in goodsImageList.img" class="image-box" :key="index">
						<img :src="item.reduce" class="image" @click="previewImage(index)"></img>
						<view class="flex" v-if="item.type!='tmp'">
							<text selectable="true"  
							class="de  justify alter center cursor" 
							style="margin-bottom: 5px;"
							@click="previewImage(index,true)"
							>
							高清图
							</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="fanyeImageBox">
				<view class="fanyeImage ">
					<view class="alter justify margin" @click="PageTurningOpen('subtract')">
						<img  src="../../static/goods/web__left.png" class="goodsAddImage"></img>
						上一个商品
					</view>
				
					<view class="alter justify margin" @click="PageTurningOpen('add')">
						<img  src="../../static/goods/web__right.png" class="goodsAddImage"></img>
						下一个商品
					</view>
				</view>
			</view>
							
		</uni-popup>
		<!-- end -->
	</view>
</template>

<script>

	export default{
		name:'goodsImageList',
		components: {
			
		},
		data(){
			return{
				TabcheckedIndex:-1,//当前选中项
				goodsImageList:{}
			}
		},
		 // 此处定义传入的数据
		props: {
			/**
			 * 商品数据列表
			*/
			goodsList: {
				type:Array,
				default :''
			},
		},
		watch: {
		},
		created() {
		},
		methods:{
			/**
			 * 商品图片-打开管理
			*/
			imageOpen(preview=false,index){
				
				if(preview==false){
					this.goodsImageList = this.goodsList[index]
					this.$refs.goodsImage.open()
					this.TabcheckedIndex = index
					this.$emit('goodsPreviewImageIndex',{value:index})
				}else{
					this.previewImage()
				}
				
			},
			/**
			 * 商品图片-翻页
			*/
			PageTurningOpen(type){
				var index = this.TabcheckedIndex
				if(type=='add'){
					index++;
					if(index>=this.goodsList.length){
						this.$common.showModal("已到达当前页的最后一个商品，请翻页以继续...")
						return
					}
					this.$emit('goodsPreviewImageIndex',{value:index})
				}else{
					index--;
					if(index<0){
						this.$common.showModal("已到达当前页的第一个商品，请翻页以继续...")
						return
					}
					this.$emit('goodsPreviewImageIndex',{value:index})
				}
				this.imageOpen(false,index)
				this.TabcheckedIndex = index
				this.$common.toast("成功")
			},
			/**
			 * 商品-预览
			*/
			previewImage(index=-1,source=false){
				var that   = this
				var imgArr = []
				var tmpList= that.goodsImageList.img
				var tmpListCount  = tmpList.length;
				if(index>=0){
					if(index>=tmpListCount){
						return
					}
					//加入当前选中的图片为第一张
					if(source==false){
						imgArr.push(tmpList[index].reduce)
					}else{
						imgArr.push(tmpList[index].source)
					}
					
					
					for (var i=0;i<tmpListCount;i++) {
						if(i!=index){//不是刚刚已经加入那张图片的话就往下执行
							if(source==false){
								imgArr.push(tmpList[i].reduce)
							}else{
								imgArr.push(tmpList[i].source)
							}
						}
					}
				}else{
					for (var i=0;i<tmpListCount;i++) {
						if(source==false){
							imgArr.push(tmpList[i].reduce)
						}else{
							imgArr.push(tmpList[i].source)
						}
					}
				}
				uni.previewImage({
					urls:imgArr,
					fail:(e)=>{
					}
				})
			},
		}
	}
</script>

<style>
</style>
